您的品牌或企業(yè)在網(wǎng)上的形象比以往任何時(shí)候都更加重要。雖然您的網(wǎng)站需要通過(guò)高質(zhì)量的視覺(jué)內(nèi)容保持外觀，但 31% 的消費(fèi)者也認(rèn)為引人入勝的用戶體驗(yàn)應(yīng)該是重中之重。

當(dāng)您自己創(chuàng)建網(wǎng)站時(shí)，打造有影響力的用戶體驗(yàn)通常取決于關(guān)注網(wǎng)站結(jié)構(gòu)等看不見(jiàn)的細(xì)節(jié)。雖然一個(gè)好的網(wǎng)站結(jié)構(gòu)可能無(wú)法被訪問(wèn)者的眼睛識(shí)別，但一個(gè)不適當(dāng)?shù)慕Y(jié)構(gòu)無(wú)疑會(huì)脫穎而出并留下不好的印象。在本文中，我們將定義一個(gè)網(wǎng)站結(jié)構(gòu)，解釋如何通過(guò)用戶體驗(yàn)設(shè)計(jì)的視角來(lái)構(gòu)建它，并討論當(dāng)今網(wǎng)站設(shè)計(jì)和網(wǎng)站模板中使用的最流行的模型。

什么是網(wǎng)站結(jié)構(gòu)？

網(wǎng)站結(jié)構(gòu)是指您網(wǎng)站頁(yè)面的層次結(jié)構(gòu)、順序和組織，由所需的用戶體驗(yàn)映射。它將您的所有網(wǎng)頁(yè)與菜單、內(nèi)部鏈接和內(nèi)容的導(dǎo)航系統(tǒng)連接起來(lái)。

與您網(wǎng)站的信息架構(gòu)一起，網(wǎng)站結(jié)構(gòu)是影響訪問(wèn)者用戶旅程的重要UX 設(shè)計(jì)因素。但這也是您作為創(chuàng)建者規(guī)劃站點(diǎn)布局和內(nèi)容并確定每個(gè)元素應(yīng)該放置的位置的一種方式。尤其是在設(shè)計(jì)一個(gè)包含多個(gè)頁(yè)面的網(wǎng)站時(shí)，一開(kāi)始您越注意網(wǎng)站的結(jié)構(gòu)，您以后遇到的驚喜就越少。

網(wǎng)站結(jié)構(gòu)中有哪些元素？

定義網(wǎng)站結(jié)構(gòu)可確保訪問(wèn)者在您的網(wǎng)站上發(fā)現(xiàn)信息時(shí)遵循邏輯用戶旅程。該結(jié)構(gòu)必須包括您網(wǎng)站上的所有網(wǎng)頁(yè)、用于組織這些網(wǎng)頁(yè)的類別系統(tǒng)以及訪問(wèn)者從一個(gè)元素導(dǎo)航到另一個(gè)元素的方法。您網(wǎng)站的結(jié)構(gòu)應(yīng)確保首先發(fā)現(xiàn)最重要的信息，同時(shí)邀請(qǐng)?jiān)L問(wèn)者繼續(xù)探索以下元素：

• 類別和子類別
• 導(dǎo)航
• 鏈接系統(tǒng)

類別和子類別

類別為組織網(wǎng)站結(jié)構(gòu)、對(duì)具有相似內(nèi)容的網(wǎng)站頁(yè)面進(jìn)行分組以及使訪問(wèn)者更容易找到所需內(nèi)容奠定了基礎(chǔ)。此外，具有大量類別的較大站點(diǎn)應(yīng)將其內(nèi)容進(jìn)一步劃分為子類別。

如果您是一家服裝零售商，您的電子商務(wù)網(wǎng)站主頁(yè)將以指向主要購(gòu)物類別的鏈接開(kāi)頭，例如“鞋子”、“外套”、“褲子”或“配飾”。最終，這些頁(yè)面會(huì)將訪問(wèn)者引導(dǎo)至各個(gè)子類別；例如，“涼鞋”將位于“鞋子”下方，而“羊毛”等子類別將位于“外套”下方。

導(dǎo)航

您網(wǎng)站的導(dǎo)航為訪問(wèn)者布置了其結(jié)構(gòu)，充當(dāng)他們所需內(nèi)容的方向圖。在大多數(shù)情況下，這從網(wǎng)站菜單開(kāi)始——可能是頂部的經(jīng)典標(biāo)題菜單或更簡(jiǎn)約的漢堡菜單。

由于導(dǎo)航的目的是引導(dǎo)訪問(wèn)者，因此您的主頁(yè)應(yīng)該清楚地顯示他們?cè)谀W(wǎng)站上尋找的頁(yè)面和類別。從那里，子類別也應(yīng)該是可發(fā)現(xiàn)的，無(wú)論是使用下拉菜單還是使用其他方式顯示子類別頁(yè)面的鏈接。此外，您需要確保網(wǎng)站的導(dǎo)航能夠?qū)⒃L問(wèn)者引導(dǎo)至與您的品牌相關(guān)的其他重要網(wǎng)頁(yè)，例如“關(guān)于我們”頁(yè)面或“聯(lián)系”頁(yè)面。

鏈接系統(tǒng)

實(shí)施經(jīng)過(guò)深思熟慮的鏈接系統(tǒng)可確保您的用戶正確瀏覽您的網(wǎng)站。根據(jù)您使用的網(wǎng)站結(jié)構(gòu)類型，訪問(wèn)者對(duì)您的鏈接系統(tǒng)的依賴程度會(huì)有所不同。除了網(wǎng)站菜單中的鏈接外，結(jié)構(gòu)還可以利用以下類型的鏈接來(lái)提升用戶體驗(yàn)：

• CTA或號(hào)召性用語(yǔ)是戰(zhàn)略性放置的鏈接，可將訪??問(wèn)者帶到直接目標(biāo)，鼓勵(lì)他們采取行動(dòng)。無(wú)論是指向“注冊(cè)”還是“購(gòu)買”的鏈接，CTA 對(duì)在您的網(wǎng)站上有特定目標(biāo)的訪問(wèn)者都非常有幫助。使用粗體文本、誘人的縮略圖或按鈕設(shè)計(jì)來(lái)展示它們。
• 內(nèi)部鏈接是指網(wǎng)站內(nèi)連接到同一網(wǎng)站其他頁(yè)面的那些鏈接。每個(gè)網(wǎng)站的網(wǎng)頁(yè)之間自然都有內(nèi)部鏈接，是否以最適合訪問(wèn)者的方式組織完全取決于您。有時(shí)，企業(yè)會(huì)將其頁(yè)面分組為類別“集群”，以此為指導(dǎo)。擁有內(nèi)部鏈接系統(tǒng)也恰好是一個(gè)強(qiáng)大的 SEO 最佳實(shí)踐。由于它反映在您的站點(diǎn)地圖中，因此 Google 機(jī)器人會(huì)看到為以正確的順序向訪問(wèn)者提供最相關(guān)的信息所做的努力。
• 上下文鏈接將訪問(wèn)者帶到您自己網(wǎng)站網(wǎng)頁(yè)之外的相關(guān)內(nèi)容，例如其他企業(yè)的產(chǎn)品頁(yè)面、博客文章、資源或新聞。

不同類型的網(wǎng)站結(jié)構(gòu)

看看下面不同類型的網(wǎng)站結(jié)構(gòu)和示例。你注意到什么模式？各有什么特點(diǎn)？哪種類型的用戶將從這些結(jié)構(gòu)中獲益最多？掌握四種最基本的結(jié)構(gòu)及其使用方式將有助于您更好地了解如何構(gòu)建自己的設(shè)計(jì)或使用哪種網(wǎng)站模板：

• 分層模型
• 順序（又名線性）模型
• 矩陣模型
• 數(shù)據(jù)庫(kù)模型

分層模型

最流行的網(wǎng)站結(jié)構(gòu)類型是分層模型，其中主頁(yè)作為起點(diǎn)，根據(jù)重要性分為不同的類別和頁(yè)面。由于用途廣泛，這種結(jié)構(gòu)適用于各種類型的網(wǎng)站——從個(gè)人服務(wù)網(wǎng)站到在線投資組合。

首先，根據(jù)重要性對(duì)內(nèi)容進(jìn)行排序。大多數(shù)時(shí)候，這意味著確保用戶在發(fā)現(xiàn)更多細(xì)節(jié)之前首先獲得一般信息。要起草和測(cè)試您的層次結(jié)構(gòu)，請(qǐng)使用線框和卡片分類練習(xí)。然后，一旦您創(chuàng)建并映射了頁(yè)面，就可以使用互連系統(tǒng)和導(dǎo)航菜單在您的網(wǎng)站上實(shí)現(xiàn)此層次結(jié)構(gòu)。

在下面的示例中，我們?cè)赟teven Popovich的在線作品集中看到了分層網(wǎng)站結(jié)構(gòu)的完美表現(xiàn)。最終，它促進(jìn)了用戶通過(guò)網(wǎng)站上不同級(jí)別的信息和操作的旅程——從主頁(yè)上的“美容”和“廣告”等更大的類別，訪問(wèn)者在搜索特定項(xiàng)目和品牌時(shí)獲得更詳細(xì)的信息。

順序（又名線性）模型

連續(xù)的 Web 結(jié)構(gòu)會(huì)引導(dǎo)用戶逐步實(shí)現(xiàn)他們的目標(biāo)，無(wú)論是縮小類別、指導(dǎo)他們的搜索過(guò)程還是幫助他們找到注冊(cè)表單。這種基本的、低維護(hù)的結(jié)構(gòu)適合內(nèi)容和頁(yè)面最少的網(wǎng)站，例如小型企業(yè)網(wǎng)站或在線投資組合。

順序網(wǎng)站結(jié)構(gòu)從您的主頁(yè)或著陸頁(yè)開(kāi)始，其中列出了許多頁(yè)面或類別。訪問(wèn)者遵循線性流程，引導(dǎo)他們通過(guò)父頁(yè)面的旅程，最終將他們帶到他們想要的內(nèi)容。

在下面的例子中，Aly Gray設(shè)計(jì)了她的健身網(wǎng)站來(lái)引導(dǎo)用戶完成一個(gè)連續(xù)的旅程。通過(guò)在她的主頁(yè)上顯示四種類型的培訓(xùn)包，訪問(wèn)者可以選擇最初聽(tīng)起來(lái)最好的一種，然后一頁(yè)一頁(yè)地開(kāi)始注冊(cè)過(guò)程。

矩陣模型

雖然矩陣是最古老的網(wǎng)站結(jié)構(gòu)模型之一，但它在今天仍然很流行。為了讓訪問(wèn)者享受沒(méi)有嚴(yán)格類別的瀏覽，遵循矩陣模型的網(wǎng)站結(jié)構(gòu)沒(méi)有考慮嚴(yán)格的用戶旅程。這聽(tīng)起來(lái)可能很混亂，但對(duì)于訪問(wèn)者來(lái)說(shuō)，這意味著完全的自由和訪問(wèn)您網(wǎng)站所有內(nèi)容的多個(gè)入口點(diǎn)。

雖然類別、子類別和單個(gè)頁(yè)面仍應(yīng)存在于矩陣模型中，但您不必為用戶安排它們的出現(xiàn)順序。相反，該網(wǎng)站強(qiáng)大的鏈接和對(duì)導(dǎo)航功能（如網(wǎng)站菜單或搜索欄）的重要性不斷提高，服務(wù)于用戶體驗(yàn)。

矩陣網(wǎng)站結(jié)構(gòu)的一些最好的例子是在線報(bào)紙、在線資源或大型電子商務(wù)網(wǎng)站，這些網(wǎng)站的各種內(nèi)容相互關(guān)聯(lián)。下面，Tach Clothing使用矩陣模型，通過(guò)在搜索欄中添加面包屑和建議的“熱門產(chǎn)品”下拉列表，將訪問(wèn)者帶到他們當(dāng)前的旅程之外——盡管會(huì)分散注意力。

數(shù)據(jù)庫(kù)模型

遵循數(shù)據(jù)庫(kù)模型的網(wǎng)站結(jié)構(gòu)通常會(huì)創(chuàng)建動(dòng)態(tài)和個(gè)性化的體驗(yàn)。按照這種模式訪問(wèn)網(wǎng)站的訪問(wèn)者通常需要輸入他們自己的個(gè)人詳細(xì)信息、查詢或偏好。從那里，該網(wǎng)站將向他們展示存儲(chǔ)在網(wǎng)頁(yè)數(shù)據(jù)庫(kù)中的相關(guān)內(nèi)容，如個(gè)人詳細(xì)信息或產(chǎn)品頁(yè)面。

要自行完成此操作，您需要使用允許您創(chuàng)建內(nèi)部數(shù)據(jù)庫(kù)或與外部數(shù)據(jù)庫(kù)集成的網(wǎng)站軟件。使用自下而上的方法來(lái)組織您的內(nèi)容并勾勒出最具活力的設(shè)計(jì)以將其展示給訪問(wèn)者。

Code Zero Yachts的商業(yè)網(wǎng)站（如下所示）使用Velo集成了一個(gè)復(fù)雜的數(shù)據(jù)系統(tǒng)，以幫助訪問(wèn)者找到在特定時(shí)間、價(jià)格范圍和位置可用的游艇。

提示：如果在低代碼到無(wú)代碼的范圍內(nèi)，您處于無(wú)代碼方面，請(qǐng)嘗試使用這種簡(jiǎn)單的方法在您的 Wix 站點(diǎn)上顯示數(shù)據(jù)庫(kù)集合中的內(nèi)容。

如何處理您的網(wǎng)站結(jié)構(gòu)

準(zhǔn)備好設(shè)計(jì)網(wǎng)站后，請(qǐng)決定是使用自上而下還是自下而上的網(wǎng)站結(jié)構(gòu)來(lái)組織內(nèi)容。自上而下的方法從根據(jù)您網(wǎng)站的一般主題概述類別層次結(jié)構(gòu)開(kāi)始，而自下而上的方法從最不重要的子類別開(kāi)始，一直到更一般的類別和內(nèi)容。

如果您從模板開(kāi)始，您可能無(wú)需考慮創(chuàng)建網(wǎng)站結(jié)構(gòu)——只需尋找適合您內(nèi)容的結(jié)構(gòu)即可。如果您要從頭開(kāi)始制作網(wǎng)站，在線框圖和起草設(shè)計(jì)架構(gòu)等階段使用UX 工具對(duì)于啟動(dòng)此過(guò)程非常有幫助。

為什么關(guān)注您的網(wǎng)站結(jié)構(gòu)很重要？

為了讓訪問(wèn)者在您的網(wǎng)站上實(shí)現(xiàn)目標(biāo)，他們必須按特定順序點(diǎn)擊元素。據(jù)GoodFirms稱，34.6% 的在線訪問(wèn)者會(huì)離開(kāi)內(nèi)容結(jié)構(gòu)不佳的網(wǎng)站。無(wú)論您是從網(wǎng)站模板開(kāi)始，還是從頭開(kāi)始進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，您都有責(zé)任確保訪問(wèn)者可以在您的網(wǎng)站上準(zhǔn)確找到他們需要的內(nèi)容，確保可靠的網(wǎng)站結(jié)構(gòu)來(lái)支持他們的用戶體驗(yàn)。

但是所有這些都在談?wù)撃慕Y(jié)構(gòu)將如何使用戶受益，作為其創(chuàng)建者的您呢？從商業(yè)角度來(lái)看，穩(wěn)固的網(wǎng)站結(jié)構(gòu)也值得付出努力。擁有易于使用的網(wǎng)站無(wú)疑會(huì)讓客戶滿意。通過(guò)正確的策略，您的結(jié)構(gòu)將通過(guò)幫助客戶購(gòu)買和加快結(jié)帳或聯(lián)系流程來(lái)支持您的業(yè)務(wù)。